<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        p {
            display: flex;
        }

        input {
            margin-left: 10px;
        }

        #random_code {
            width: 80px;
            height: 30px;
            background-color: #ddd;
            margin-left: 10px;
            text-align: center;
            line-height: 30px;
            letter-spacing: 2px;
        }

        #refresh {
            margin-left: 10px;
        }
    </style>
</head>

<body>
    <p>用户要求：名字只能包含数字、字母，数字不可以开头，长度不低于6，不长于12 [0-9 a-z A-Z]</p>
    <p>
        <label for="user">用户名</label>
        <input id="user" name="user" type="text">
        <span id="user_span"></span>
    </p>
    <p>密码6-12位 不能包含特殊字符 (弱 z/1/A 中 包含两种 强 包含三种)</p>
    <p>
        <label for="pwd">密码</label>
        <input id="pwd" name="pwd" type="text">
        <span id="pwd_span"></span>
    </p>
    <p>确认密码 两次输入相同</p>
    <p>
        <label for="repwd">确认密码</label>
        <input id="repwd" name="repwd" type="text">
        <span id="repwd_span"></span>
    </p>
    <p>随机4位验证码(点击切换验证码)</p>
    <p>
        <label for="code">验证码</label>
        <input id="code" name="code" type="text">
        <span id="random_code"></span>
        <button id="refresh">刷新验证码</button>
        <span id="code_span"></span>
    </p>
    <button id="btn">注册</button>


    <script>

        var arr = ['0','1','2','a','b','c'] ;


        // 获取用户名
        var oUser = get('user') ;
        var oUserSpan = get('user_span') ;

        // 获取按钮
        var oBtn = get('btn') ;


        // 显示验证码


        // 注册验证
        oBtn.onclick = function() {
            // 用户名验证
            var userVal = oUser.value ;

            // 判断为空
            if(userVal === '') {
                oUserSpan.innerHTML = '用户名不能为空' ;
                oUserSpan.style.color = 'red' ;
                return ;
            }

            // 判断长度
            if(userVal.length > 12 || userVal.length < 6) {
                oUserSpan.innerHTML = '用户名长度必须是6-12' ;
                oUserSpan.style.color = 'red' ;
                return ;
            }

            // 数字不能开头 
            //   0-9 
            //   !isNaN()
            //   [0,1,2,3,4,5,6,7,8,9]  判断是否存在
            if(userVal.charAt(0) >= 0 && userVal.charAt(0) <= 9) {
                oUserSpan.innerHTML = '用户名不能使用数字开头' ;
                oUserSpan.style.color = 'red' ;
                return ;
            }

            // 不能使用数字和字母以外的符号  [a-zA-Z0-9]
            // 遍历用户名   
            for(var i in userVal) {
                // 如果不存在就报错
                if(arr.indexOf(userVal[i]) === -1) {
                    oUserSpan.innerHTML = '用户名只能是数字字母组成' ;
                    oUserSpan.style.color = 'red' ;
                    return ;
                }
            }

            oUserSpan.innerHTML = '√' ;
            oUserSpan.style.color = 'green' ;


            // 密码验证
        

        }



        function get(id) {
            return document.getElementById(id)
        }
    </script>


</body>

</html>